import { DirectiveBinding } from 'vue'

export default {
  beforeMount(el: any, binding: DirectiveBinding) {
    const selectDom = document.querySelector('.single-select-loadmore .el-select-dropdown__wrap')
    function loadMores(this: Element) {
      const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (isBase) {
        binding.value && binding.value()
      }
    }
    el.selectDomInfo = selectDom
    el.selectLoadMore = loadMores
    selectDom?.addEventListener('scroll', loadMores.bind(selectDom))
  },
  beforeUnmount(el: any) {
    if (el.selectLoadMore) {
      el.selectDomInfo.removeEventListener('scroll', el.selectLoadMore)
      delete el.selectDomInfo
      delete el.selectLoadMore
    }
  },
}
